<template>
  <div class="flex w-full min-h-screen flex-col bg-gray-100">
    <header-cmp></header-cmp>
    <div>
      <el-button @click="save">保存</el-button>
    </div>
    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容"
              v-model="data.ask"></el-input>
    <code-editor v-model="data.value"></code-editor>
<!--    <code-editor type="text" :value="data.value" @input="data.value = $event"></code-editor>-->
    <footer-cmp></footer-cmp>
  </div>
</template>

<script>
import FooterCmp from "@/views/components/FooterCmp.vue";
import HeaderCmp from "@/views/components/HeaderCmp.vue";
import CodeEditor from "@/views/components/CodeEditor.vue";
import {getJson, postJson} from "@/assets/http";
import {createYmlApi, getChildrenYmlApi, updateByIdYmlApi} from "@/assets/api";

export default {
  name: "HomePage",
  components: {CodeEditor, FooterCmp, HeaderCmp},
  data() {
    return {
      id: this.$route.query.id,
      data: {
        ask: null,
        value: null,
      },
    }
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      if (this.id) {
        let params = {id: this.id};
        let res = await getJson(getChildrenYmlApi, params);
        this.data = res.data[0]
      }
    },
    save() {
      if (this.id) {
        postJson(updateByIdYmlApi, {
          id: this.id,
          ask: this.data.ask,
          value: this.data.value
        })
      } else {
        postJson(createYmlApi, {
          ask: this.data.ask,
          value: this.data.value
        })
      }
    },
  },
  mounted() {
  },
  beforeDestroy() {
  },
}
</script>

<style scoped lang="less">
</style>
